<template>
  <div>
    <!-- :color="['red', 'green']" 边框颜色,背景色 -->
    <!-- ref 获取dom元素 -->
    <div ref="echats1" style="width: 500px; height: 500px;"></div>
  </div>
</template>

<script>
// 引入echarts包
import * as echarts from 'echarts'
import axios from "axios"
export default {
  // 页面加载完成,自动执行,调用函数
  mounted () {
    this.showCharts()
  },
  // vme
  methods: {
    showCharts () {
      // clg
      console.log(this.$refs.echats1)
      axios.get('https://geo.datav.aliyun.com/areas_v3/bound/130108.json').then(res => {
        const myChart = echarts.init(this.$refs.echats1)
        echarts.registerMap('GX', res.data)
        const option = {
          // 地图组件,地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          geo: [
            {
              name: '石家庄地图',
              type: 'map',
              // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
              map: 'GX',
              // 显示标签
              label: {
                show: true
              },
              // 注册点
              regions: [
                {
                  name: '裕华区',
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0 // 为 0 时不绘制该图形
                    }
                  },
                  label: {
                    show: false // 隐藏文字
                  }
                }
              ],
            }
          ],
          // 配置提示框，有这个配置项即可
          tooltip: {},
          series: [
            {
              name: '背景地图',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: function () {
                return 8
              },
              // data: mapData,
              data: [],
              rippleEffect: {
                period: 4,
                scale: 1.5,
                brushType: 'stroke'
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    }

  }
}
</script>

<style lang="scss" scoped></style>
